<template>
  <div class="mx-nav">
    <nav class="nav">
      <span class="logo"><Icon type="md-barcode" /></span>
      <router-link class="item" to="/home">Home</router-link>
      <router-link class="item" to="/blogs">Blogs</router-link>
      <router-link class="item" to="/mood">Mood</router-link>
      <router-link class="item" to="/timeline">Timeline</router-link>
      <router-link class="item" to="/message">Message</router-link>
      <router-link class="item" to="/about">About</router-link>
    </nav>
    <!-- <div class="search">
      <input 
        v-model="searchValue" 
        type="text" 
        class="search-input" 
        placeholder="请输入搜索内容"
      />
    </div> -->
    <div class="form-control">
      <input
        type="text"
        name="username"
        id="username"
        placeholder=" "
        autocomplete="off"
        required
      />
      <label for="username">请输入搜索内容</label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mx-nav',
  data() {
    return {
      searchValue: '',
      active: 'home'
    }
  },
}
</script>

<style lang="less" scoped>
@import '../../assets/css/index.less';
  .mx-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 37px;
    padding: 0 5%;
    background-color: transparent;
    border-bottom: 1px solid #000;
    line-height: 37px;
    .nav {
      display: flex;
      &>* {
        position: relative;
        padding: 0 15px;
        color: #000;
        font-weight: 700;
        font-size: 1.2rem;
        text-transform: uppercase;
      }
    }
    .nav > .item {
      &::before {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: @yellow;
        transform: scaleX(0);
        transition: transform 0.3s;
      }
      &:hover::before {
        transform: scaleX(1);
      }
    }
    .nav .router-link-active::before {
      background-color: @yellow;
      transition: none;
      transform: none;
    }
    .form-control {
      --default-color: currentColor;
      --invalid-color: #e74c3c;
      --valid-color: @yellow;
      --border-bottom-color: currentColor;
      height: 80%;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid var(--border-bottom-color);

      &::after {
        position: absolute;
        content: "";
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: var(--valid-color);
        transform: scaleX(0);
        transform-origin: left;
        transition: 0.3s;
      }

      &:focus-within::after {
        transform: scaleX(1);
      }

      input {
        // padding: 8px 0;
        font-size: inherit;
        font-weight: inherit;
        color: currentColor;
        background: transparent;
        border: none;
        outline: none;
        // bottom: 10%;
        &:invalid ~ label {
          color: var(--invalid-color);
        }

        &:valid ~ label {
          color: var(--valid-color);
        }

        &:placeholder-shown ~ label {
          color: var(--default-color);
        }

        // label will float in 2 situations based on its sibling input:
        // 1. input get focus
        // 2. input has text filled
        &:focus ~ label,
        &:not(:placeholder-shown) ~ label {
          transform: translateX(-110%);
        }
      }

      label {
        position: absolute;
        cursor: text;
        font-size: .7rem;
        left: 0;
        transition: 0.3s;
        transform-origin: left;
      }
    }
  }
</style>